主要區別

• var：
  • 變數未宣告前使用，會出現undefined
  • var為函式作用域(function scope)，不會受限在區塊作用域（block scope）內=>區塊語句（if、else、 for、 while等)
  • 可能會汙染全域變數
  • 可以重複宣告
• let：
  • 變數未宣告前使用，會出現Uncaught ReferenceError
  • 為區塊作用域（block scope)
  • 不會產生全域變數
  • 無法在同一層 Block 重複宣告變數
  • 宣告後能更改值
• const：
  • 變數未宣告前使用，會出現Uncaught ReferenceError
  • 常用在一些不能被變更的變數
  • 在宣告時變數就必定要指定給值，不然會產生錯誤。
  • 具備 let 所有的特性(唯一不同點是宣告後不能更改值)
  • 不過有個例外，就是 { 物件 } 跟 [ 陣列 ] 還是會被變更
  • 若不想被修改可以用 Object.freeze() ，凍結一個物件，用於防止物件新增屬性，或是防止原有的屬性被刪除。

重要!

如果在作用域內沒有宣告，變數就會往外層的作用域找看看有沒有宣告，全域都沒找到，就會在全域的最開端進行宣告，也就是說如果在作用域裡面沒有宣告的變數就會變成全域變數。
建議在開發ES6之後的專案中，使用“ const ”或者“let”嚴謹的宣告變數而非“var”，除了讓開發的專案更加穩定外，也可以增加程式碼的可讀性。

題目

回答出為何出現下列狀況:

1.第二個console.log(i)為何為3

for(var i=0; i<3; i++){
  console.log(i,"Hi");
  // 依次出現 0 "Hi"、1 "Hi"、2 "Hi"
}
console.log(i);
// 出現3

Ans:因var是函式作用域，故汙染全域下的i

2.為何出現錯誤

let a = 6;
let a = 20;
console.log(a);
//出現錯誤：Identifier 'a' has already been declared

var a = 6;
let a = 20;
console.log(a);
//出現錯誤：Identifier 'a' has already been declared

Ans:因let無法在同一層 Block 重複宣告變數(即使另一個是用 var 宣告的變數也不行)

3.為何const能夠重新賦值

const myObj = {
  url: "http://123.com"
}
myObj.url = "changed";
console.log(myObj.url); // changed

Ans:因為在 JS 中陣列和物件都是屬於 reference type，在修改時並沒有把這個常數指向其他地方，故可更改

console.log(a)個別的值

var a = 5;

(function(){
  var a = 30 ;
  console.log(a);
})();

console.log(a);
if(a !== 0 ){
  var a = 10;
};

console.log(a);

第一個console.log(a)--->在立即函式裡，為函式作用域，故為30。
第二個console.log(a)--->在全域裡，故為5。
第三個console.log(a)--->在區塊作用域裡，故全域汙染，故為10。

3.必刷熱門面試題

function sayHi() {
  var a = 'Mary';
  a = 'Tom';
}
var a = 'Casper';
sayHi();
console.log('Hello' + ' ' + a); //"Hello Casper"

function sayHi() {
  a = 'Tom';
}
var a = 'Casper';
sayHi();
console.log('Hello' + ' ' + a);  // "Hello Tom"因sayHi()裡的a無宣告，故汙染全域變數

• 多層進階題

function sayHi() {
  a = 'Tom';
  var a = "sam";
  function sayho(){
    a = "ohmygod"
  };
  sayho();
}
var a = 'Casper';
sayHi();
console.log('Hello' + ' ' + a);   //Hello Casper

function sayHi() {
  a = 'Tom';
  function sayho(){
    a = "ohmygod"
  };
  sayho();
}
var a = 'Casper';
sayHi();
console.log('Hello' + ' ' + a);   //Hello ohmygod